<template>
  <el-dialog
      :visible.sync="$attrs.visableIf"
      @close="handleCloseDialog"
      width="900px"
      append-to-body
  >
    <div slot="title" class="dialog-title">
      <span style="font-size: 16px">黑名单触发执行踢人记录</span>
      <span style="color: red; margin-left: 5px">仅保留近7天的记录</span>
    </div>
    <div class="userInfo">
      <div class="user-img"><img src="@/assets/images/profile.jpg"/></div>
      <div class="user-name">闵雨薇</div>
      <div class="user-unit">@锐行</div>
    </div>
    <div class="time">2024-04-25 16:20:39</div>
    <div class="type"><strong>触发路径：</strong>手动添加</div>
    <el-table
        :data="tableDataList"
        ref="customerMgtList"
        style="margin-top: 20px"
    >
      <el-table-column
          :label="item.label"
          align="center"
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.key"
          :min-width="item.minWidth ? item.minWidth : ``"
          :fixed="item.fixed ? item.fixed : false"
          :show-overflow-tooltip="true"
      >
        <!--用于表格自定义-->
        <template slot-scope="scope">
          <div>{{ scope.row[item.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>


export default {
  components: {

  },
  data() {
    return {
      tableHeight: 600,
      tableColumns: [
        {key: 'name', label: `触发时间`, visible: true, minWidth: 150, fixed: true},
        {key: 'mobile', label: `踢出群名称`, visible: true, minWidth:300, fixed: false},

      ],
      tableDataList: [],
      total: 8, // 表格的总条数
    }
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      this.quill = new Quill('#editor', this.options);
      // 注册键盘事件
    })
  },
  methods: {
    //重置表单
    handleReset() {
      this.resetForm("form");
    },
    // 自定义blot
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },

    getHtml(html) {
      this.quill.focus();
      var range = this.quill.getSelection();
      if (range) {
        if (range.length == 0) {
          console.log('User cursor is at index', range.index);
          this.quill.insertEmbed(this.quill.getSelection().index || 0, 'AppPanelEmbed', `<span class="htmlTags">${html}</span>`);
          // 调整光标到最后
          this.quill.setSelection(range.index + 1);
        }
      } else {
        console.log('User cursor is not in editor');
      }
    },

    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            // editInfo(this.form).then(() => {
            //   this.$modal.msgSuccess('修改成功')
            //   this.handleCloseDialog();
            //   this.$emit('getList');
            // })
          }
        }
      })
    },
    onEditorBlur() {
    }, // 失去焦点触发事件
    onEditorFocus() {
    }, // 获得焦点触发事件
    onEditorChange() {
    }, // 内容改变触发事件
  },
};
</script>

<style scoped lang="scss">
.userInfo {
  position: relative;
  background: #fff;
  padding:0px;
  padding-left:70px;
  min-height: 60px;

  .user-img {
    width:50px;
    height: 50px;
    position: absolute;
    left:0px;
    top:0px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;

    }
  }

  .user-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 24px;
  }

  .user-unit {
    display: inline-block;
    font-size: 12px;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .label-list {
    label {
      font-size: 14px;
      line-height: 1.5715;
      word-wrap: break-word;
      font-weight: 400;
    }

    span {
      margin: 4px 4px 4px 0;
      font-size: 12px;
      height: 25px;
      line-height: 25px;
      white-space: nowrap;
      background: #f0f0f0;
      border: 1px solid #e9e9e9;
      border-radius: 4px;
      padding: 0px 7px;
      display: inline-block;

    }
  }
}
.time {
  line-height: 20px;
}
.type{
  line-height: 20px;
}
</style>
